<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="Mine-categories-swipe">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item>
          <img :src="list.img1" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="list.img2" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="list.img2" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="list.img2" />
        </van-swipe-item>
      </van-swipe>
      <div class="price">￥{{ list.originprice }}</div>
      <div class="proname">{{ list.proname }}</div>
    </div>
    <!-- 提交购物车的写法 -->
    <div>
      <van-tabbar>
        <van-action-bar>
          <van-action-bar-icon icon="shop-o" text="购物车" @click="shopcar" />
          <van-action-bar-button
            color="#be99ff"
            type="warning"
            text="加入购物车"
            @click="joinshopcar1"
          />
          <van-action-bar-button
            color="#7232dd"
            type="danger"
            text="立即购买"
            @click="intmale"
          />
        </van-action-bar>
      </van-tabbar>
    </div>
  </div>
</template>
<script setup>
// 引入接口
import { detailproid, joinshopcar } from "../services/index";
// 加入购物车的接口
// import {joinshopcar} from '../services/index'
// 1. 引入 useRoute
import { useRoute, useRouter } from "vue-router";
import { useStores } from "../stores/stores";
//
import { ref, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";

const mainStores = useStores();
const list = ref([]);
// 2. 生成 route 对象
const route = useRoute();
const router = useRouter();
const onClickLeft = () => {
  history.back();
  //   console.log(route.params.id);
};
// detailproid(route.params.id).then((res) => {
// //   console.log(route.params.id);
//   list.value = res.data.data;
// //   console.log(res.data.data);
//   // 获取商品数据详情成功
// });
// 异步处理
onMounted(async () => {
  let res = await detailproid(route.params.id);
  list.value = res.data.data;
});
// 跳转到购物车
const shopcar = function () {
  router.push("/car");
};
// 加入购物车的思路，先判断是否有token。如何没有token就提示需要登录。有token的话就加入购物车
const joinshopcar1 = async function () {
  console.log(localStorage.getItem("userid"));
  if (localStorage.getItem("token") && mainStores.token) {
    let res = await joinshopcar({
      userid: localStorage.getItem("userid"),
      proid: list.value.proid,
      num: 1,
    });
    console.log(res);
    showSuccessToast("加入数量为1");
  } else {
    showFailToast("请先登录");
  }
};
// 立即购买的思路   立即购买也是跳转。其他的好像没有区别
const intmale = function () {
  router.push("/car");
};
</script>
<style scoped>
.Mine-categories-swipe img {
  display: inline-block;
  width: 100%;
  height: 350px;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 350px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}

.imgcarousel {
  /* display: block; */
  width: 100%;
  height: 100%;
}
.price {
  color: red;
  font-size: 20px;
  /* margin-top: 20px; */
  text-align: center;
}
.proname {
  margin-top: 10px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
}
</style>
